<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS浮动</title>
        <style>
            .father{
                background-color: aquamarine;
                /* height: 150px; */
                border: 3px solid brown;
                /* 清除浮动 */
                /* overflow: hidden; */
            }
            .father::after{
                content: "";
                display: table;
                clear: both;
            }
            .left-son{
                width: 100px;
                height: 100px;
                background-color: yellowgreen;
                float: left;
            }
            .right-son{
                width: 100px;
                height: 100px;
                background-color: yellow;
                float: right;
            }            
        </style>
    </head>
    <body>
        <div class="father">
            <div class="left-son">左浮动</div>
            <div class="right-son">右浮动</div>
        </div>
    </body>
</html>